<template>
    <div class="tea-set">
        <ul>
        <li v-for="(item, index) in setList" :key="index"
        @click="goDetail(item.id)">
            <img :src="item.imgUrl" alt="">
            <h3>{{item.name}}</h3>
        </li>
      </ul>
    </div>
  </template>
  
<script>
export default {
    data() {
        return{
            setList:[
                {
                    id: 1,
                    name: '盖碗',
                    imgUrl:require('@/assets/img/set1.png')
                },
                {
                    id: 2,
                    name: '茶壶',
                    imgUrl:require('@/assets/img/set2.png')
                },
                {
                    id: 3,
                    name: '茶巾',
                    imgUrl:require('@/assets/img/set3.png')
                },
                {
                    id: 4,
                    name: '茶托',
                    imgUrl:require('@/assets/img/set4.png')
                },
                {
                    id: 5,
                    name: '水盂',
                    imgUrl:require('@/assets/img/set5.png')
                },
                {
                    id: 6,
                    name: '随手泡',
                    imgUrl:require('@/assets/img/set6.png')
                }
            ]
        }
    },
    methods:{
        goDetail(id) {
            this.$router.push({path: '/detail', query: {id: id}})
            window.scrollTo(0, 0);
        }
    }
}
</script>

<style scoped> 
.tea-set {
    background-color: white;
}
.tea-set img {
    width: 66px;
    height: 66px;
}
.tea-set h3 {
    font-size: 16px;
}
.tea-set ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-top: 30px;
}
.tea-set li {
    list-style: none;
    width: 30%;
    margin-bottom: 20px;
    text-align: center;
}

</style>